/*
 * @Author: HuashengA 
 * @Date: 2018-09-24 18:59:16 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-10-05 10:17:22
 * 注册页面的js文件
 */
import HeaderLogin from '@/components/HeaderLogin'
import User from '@/service/user-service'
import Tips from '@/utils/tipsUtil'
import RulesUtil from '@/utils/rulesUtil'
const _user = new User()
const _tips = new Tips()
const _regular = new RulesUtil()

export default {
  data() {
    //自定义的验证规则 用户名的校验规则
    let validateUsername = (rule, value, callback) => {
      let result = _regular.validate(value, 'username')
      if (result) {
        callback(new Error(result))
      } else {
        callback()
      }
    }

    //自定义的验证规则 密码的校验
    let validatePassWord = (rule, value, callback) => {
      if (_regular.validate(value, 'require')) {
        length = value.length
        if (length >= 3 && length <= 15) {
          callback()
        } else {
          callback(new Error('输入的密码的长度在3到15个字符'))
        }
      } else {
        callback(new Error('请输入密码！'))
      }
    }

    //自定义的验证规则 确认密码的校验
    let validateConfirmPwd = (rule, value, callback) => {
      if (_regular.validate(value, 'require')) {
        length = value.length
        if (length >= 3 && length <= 15) {
          if (this.registerFrom.confirmPwd !== this.registerFrom.password) {
            callback(new Error('两次输入的密码不一致'))
          } else {
            callback()
          }
        } else {
          callback(new Error('输入的密码的长度在3到15个字符'))
        }
      } else {
        callback(new Error('请输入确认密码！'))
      }
    }

    //自定义的验证规则 电话号码的验证
    let validatePhone = (rule, value, callback) => {
      let result = _regular.validate(value, 'phone')
      if (result) {
        callback(new Error(result))
      } else {
        callback()
      }
    }

    //自定义的验证规则 邮箱的验证
    let validateEmail = (rule, value, callback) => {
      let result = _regular.validate(value, 'email')
      if (result) {
        callback(new Error(result))
      } else {
        callback()
      }
    }
    //自定义的验证规则 问题的验证
    let validateQuestion = (rule, value, callback) => {
      if (_regular.validate(value, 'require')) {
        callback()
      } else {
        callback(new Error('请输入你的问题'))
      }
    }

    //自定义的验证规则 答案的验证
    let validateAnswer = (rule, value, callback) => {
      if (_regular.validate(value, 'require')) {
        callback()
      } else {
        callback(new Error('请输入回答问题答案'))
      }
    }

    return {
      activeName: 'first',
      registerFrom: {
        username: '',   //用户名
        password: '',   //密码
        confirmPwd: '', //确认密码
        phone: '',      //手机号
        email: '',      //邮箱
        question: '',   //问题
        answer: '',     //回答问题的答案
        sex: '3'        //性别
      },

      //快速注册的表单的校验
      registerRules: {
        //用户名的校验
        username: [{ validator: validateUsername, trigger: 'blur' }],
        //密码的校验
        password: [{ validator: validatePassWord, trigger: 'blur' }],
        //确人密码的校验
        confirmPwd: [{ validator: validateConfirmPwd, trigger: 'blur' }]
      },

      //注册的表单的校验
      registerRules2: {
        //用户名的校验
        username: [{ validator: validateUsername, trigger: 'blur' }],
        //密码的校验
        password: [{ validator: validatePassWord, trigger: 'blur' }],
        //确人密码的校验
        confirmPwd: [{ validator: validateConfirmPwd, trigger: 'blur' }],
        //手机号的验证
        phone: [{ validator: validatePhone, trigger: 'blur' }],
        //邮箱的验证
        email: [{ validator: validateEmail, trigger: 'blur' }],
        //问题的验证
        question: [{ validator: validateQuestion, trigger: 'blur' }],
        //答案的验证
        answer: [{ validator: validateAnswer, trigger: 'blur' }]
      }
    }
  },
  components: {
    HeaderLogin
  },
  methods: {
    /**
     * 注册
     */
    register(registerFrom2) {
      let vue = this
      vue.$refs[registerFrom2].validate((valid) => {
        if(valid){
          if(vue.activeName === 'first'){
            let userInfo = {
              username: vue.registerFrom.username,
              password: vue.registerFrom.password
            }
            _user.registerQuick(userInfo).then(res=>{
              //取出用户名
              let responseUsername = res.data.username
              //编程式路由跳转到登录页面
              vue.$router.push({path:'/login',name:'Login',query:{username: responseUsername}})
            },err=>{
              _tips.notifyTips(vue, err.msg)
            })     
          }else if(vue.activeName === 'second'){
            let userInfo = {
              username: vue.registerFrom.username,
              password: vue.registerFrom.password,
              email: vue.registerFrom.email,
              phone: vue.registerFrom.phone,
              question: vue.registerFrom.question,
              answer: vue.registerFrom.answer,
              gender: vue.registerFrom.sex
            }
            _user.register(userInfo).then(res=>{
              let responseUsername = res.data.username
              vue.$router.push({path:'/login',name:'Login',query:{username: responseUsername}})
            },err=>{
              _tips.notifyTips(vue, err.msg)
            })
            
          }
        }else{
          _tips.notifyTips(vue, '填写表单有误')
        }
      })
    },

    /**
     * 2.用户名、电子邮箱、手机号码是否已经被使用的实时的校验
     */
    checkValue(type, value) {
      let vue = this
      _user.checkValid(type,value).then(
        res => {
          
        },
        err => {
          _tips.notifyTips(vue, err.msg);
        }
      );
    }
    
  }
}
